<template>
	<view>
		<myhead left="1"></myhead>
		<view class="tit">
			<view>请付款</view>
			<view>付款剩余时间<span>{{yzmBtnTxt1}}</span></view>
		</view>
		<view class="content">
			<view>购买USDT</view>
			<view>
				<view>总价</view>
				<view class="money">￥{{list.sumAmount}}</view>
			</view>
			<view>
				<view>单价</view>
				<view>￥{{list.amount}}</view>
			</view>
			<view>
				<view>数量</view>
				<view>{{list.sumNumber}}USDT</view>
			</view>
			<view>
				<view>订单号</view>
				<view>{{list.outTradeNo}}</view>
			</view>
			<view>
				<view>卖家昵称</view>
				<view>{{list.sellNickName}}</view>
			</view>
		</view>
		<view class="btnList">
			<view @tap="qxBtn">取消订单</view>
			<view @tap="btn">{{yzmBtnTxt}}</view>
		</view>
	</view>
</template>

<script>
	const http = require('../../utils/http.js');
	export default {
		data() {
			return {
				list:'',
				yzmBool:false,
				yzmBtnTxt:null,
				yzmBtnTxt1:null,
				tradeId:null
			}
		},
		onLoad(options) {
			if(options.tradeId){
				//console.log(options.tradeId)
				this.tradeId=options.tradeId
			}else{
				uni.showToast({
				  title: '非法操作',
				  icon: 'none',
				  duration:1000
				});
				uni.hideLoading();
				setTimeout(function () {
				    uni.switchTab({
				        url: '/pages/home/home'
				    });
				}, 1000);
			}
		},
		onShow() {
			uni.showLoading({
			    title: '加载中'
			});
			http.post('/api/purchase/getTradeDetail',{tradeId:this.tradeId}).then(res => {
				clearInterval(this.clock); //清除js定时器
				clearInterval(this.clock1); //清除js定时器
				uni.showToast({
				  title: res.message,
				  icon: 'none',
				  duration:1000
				});
				if (res.code == 200 && res.result) {
					this.list=res.result
					this.yzmBool = false; //将按钮置为不可点击
					this.yzmBtnTxt = this.list.swtichCardSeconds+'秒后可付款';
					this.yzmBtnTxt1 = this.list.leftPaySeconds+'秒';
					this.clock = setInterval(this.doLoop, 1000); //一秒执行一次
					this.clock1 = setInterval(this.doLoop1, 1000); //一秒执行一次
				}
				uni.hideLoading();
			})
		},
		methods: {
			btn:function(){
				if(this.yzmBool){
					uni.navigateTo({
						url:'/pages/order/orderInfo?tradeId='+this.tradeId
					})
				}
			},
			doLoop:function(){
				if(this.list.swtichCardSeconds > 0){
					this.list.swtichCardSeconds -= 1;
					this.yzmBtnTxt = this.list.swtichCardSeconds+'秒后可付款';
				}else{
					clearInterval(this.clock); //清除js定时器
					this.yzmBool = true;
					this.yzmBtnTxt = '去付款';
				}
			},
			doLoop1:function(){
				if(this.list.leftPaySeconds > 0){
					this.list.leftPaySeconds -= 1;
					this.yzmBtnTxt1 = this.list.leftPaySeconds+'秒';
				}else{
					clearInterval(this.clock1); //清除js定时器
					this.yzmBtnTxt1 = '订单已取消';
				}
			},
			qxBtn:function(){
				let that=this
				uni.showModal({
				    title: '取消订单',
				    content: '请确认您是否决定取消订单',
				    success: function (res) {
				        if (res.confirm) {
				            http.post('/api/purchase/cancelTrade',{tradeId:that.tradeId}).then(res => {
				            	uni.showToast({
				            	  title: res.message,
				            	  icon: 'none',
				            	  duration:1000
				            	});
				            	setTimeout(function () {
				            	    uni.navigateBack({
				            	        delta: 1
				            	    });
				            	}, 1000);
				            })
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			}
		}
	}
</script>

<style>
	.tit{
		padding: 4vw;
		color: #999999;
		font-size: 3.8vw;
	}
	.tit>view:nth-child(1){
		font-size: 5vw;
		font-weight: bold;
		color: #333333;
		margin-bottom: 1vw;
	}
	.tit>view:nth-child(2) span{
		color: #007AFF;
		margin-left: 2vw;
	}
	.money{
		color: #007AFF;
		font-size: 5vw;
		font-weight: bold;
	}
	.content{
		padding: 4vw;
		font-size: 3.8vw;
	}
	.content>view{
		padding: 2vw 0;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.btnList{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 4vw;
		font-size: 3.8vw;
	}
	.btnList>view{
		padding: 2vw 0;
		border-radius: 1vw;
		text-align: center;
	}
	.btnList>view:nth-child(1){
		width: 30%;
		border: 1px solid #999999;
	}
	.btnList>view:nth-child(2){
		width: 65%;
		background: #007AFF;
		color: #FFFFFF;
	}
</style>
